<script setup lang="ts">
import { ApiDetail, getApiDetail } from '@/api/api-manage/detail'

import useDictStore from '@/store/modules/dict'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import LabeledValue from '../components/LabeledValue.vue'
import useErrorCodeTable from './useErrorCodeTable'
import useParamsTable from './useParamsTable'
import useResponseTable from './useResponseTable'
import { getDisplayAlgorithms } from '@/utils/algorithms'
import { z } from 'zod'

defineOptions({
  name: 'api-manage/detail',
})

const querySchema = z.object({
  id: z.string(),
})

const dictStore = useDictStore()
const { api_request_method, api_request_protocol, api_type, api_catalog } = dictStore.getDicts(
  'api_request_protocol',
  'api_request_method',
  'api_type',
  'api_catalog'
)
const route = useRoute()
const router = useRouter()
const query = querySchema.parse(route.query)
const paramsTable = useParamsTable()
const responseTable = useResponseTable()
const errorCodeTable = useErrorCodeTable()
const [loading, toggleLoading] = useToggle(false)

const detail = ref<ApiDetail>({} as any)
const algorithms = computed(() => getDisplayAlgorithms(detail.value.algorithmBasic || ''))

async function getDetailData() {
  toggleLoading(true)
  const { data } = await getApiDetail(query.id).finally(() => {
    toggleLoading(false)
  })
  detail.value = data
}

getDetailData()
</script>

<template>
  <div>
    <div
      class="bg-white"
      style="
        position: relative;
        border-bottom: 1px var(--el-border-color) var(--el-border-style);
        height: 50px;
      "
    >
      <h3
        style="position: absolute; transform: translate(-50%, -50%); margin: 0; top: 50%; left: 5%"
      >
        接口详情页
      </h3>
      <el-button
        type="primary"
        style="position: absolute; right: 10px; top: 5px"
        @click="router.back()"
        >返回</el-button
      >
    </div>
    <div v-loading="loading" class="space-y-2">
      <card>
        <template #title>
          <span>接口信息</span>
        </template>
        <!-- <template #operation>
        <el-button type="primary" @click="apply">申请接口</el-button>
      </template> -->
        <div class="space-y-2">
          <div class="flex justify-between">
            <p>接口地址： {{ detail.requestPath }}</p>
            <p>
              接口状态：<span class="text-primary">{{
                detail.enabledStatus === '1' ? '已启用' : '未启用'
              }}</span>
            </p>
          </div>
          <div class="flex">
            <table class="desc-table w-full">
              <colgroup>
                <col width="120" />
                <col />
                <col width="100" />
                <col />
                <col width="100" />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <td>接口名称：</td>
                  <td>{{ detail.apiName }}</td>
                  <td>算法版本：</td>
                  <td>{{ detail.version }}</td>
                  <td>算法基础：</td>
                  <td>{{ algorithms.join(',') }}</td>
                </tr>
                <tr>
                  <td>接口分类：</td>
                  <td>{{ api_catalog.getLabel(detail.apiCatalog) }}</td>
                  <td>接口类型：</td>
                  <td>{{ api_type.getLabel(detail.apiType) }}</td>
                  <td>接口简介：</td>
                  <td>{{ detail.apiDesc }}</td>
                </tr>
                <tr>
                  <td>接口服务介绍：</td>
                  <td>{{ detail.apiIntro }}</td>
                </tr>
              </tbody>
            </table>
            <el-image
              class="aspect-square h-[128px] flex-shrink-0"
              fit="cover"
              :src="detail.apiIconPth"
            />
          </div>
          <el-row>
            <el-col :span="6">
              <labeled-value
                title="请求协议"
                :value="(api_request_protocol.getLabel(detail.requestProtocol) || '').toUpperCase()"
              />
            </el-col>
            <el-col :span="6">
              <labeled-value
                title="请求方式"
                :value="api_request_method.getLabel(detail.requestMethod)"
              />
            </el-col>
            <el-col :span="6">
              <labeled-value title="编码格式" value="UTF-8" />
            </el-col>
            <el-col :span="6">
              <labeled-value title="返回格式" value="JSON" />
            </el-col>
          </el-row>
        </div>
      </card>
      <card>
        <template #title>
          <span>请求参数</span>
        </template>
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="paramsTable.isLoading.value"
          :data="detail.apiParamList"
          :columns="paramsTable.columns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        />
      </card>
      <card>
        <template #title>
          <span>返回参数</span>
        </template>
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="responseTable.isLoading.value"
          :data="detail.apiResponseList"
          :columns="responseTable.columns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        />
      </card>
      <card>
        <template #title>
          <span>返回示例</span>
        </template>
        <highlightjs
          language="json"
          :code="detail.responseExampleValue ? detail.responseExampleValue : ''"
        />
      </card>
      <card>
        <template #title>
          <span>错误列表</span>
        </template>
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="errorCodeTable.isLoading.value"
          :data="detail.apiErrorCodeList"
          :columns="errorCodeTable.columns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        />
      </card>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.desc-table {
  td {
    @apply py-2;
  }

  td:nth-child(odd) {
    @apply text-neutral-500;
  }
}
</style>
